<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <span>span1</span>
    <span class="s2">span2</span>
    <span>span3</span>
  </div>

  <button class="add">添加节点</button>
  <button class="del">删除节点</button>
  <script>
    const s2 = document.querySelector('.s2')
    const add = document.querySelector('.add')
    const del = document.querySelector('.del')
    // console.dir(s2)

    // 1. 查找父节点
    // console.log(s2.parentNode)
    // 2. 查找子节点
    // console.log(s2.parentNode.children)
    // 3. 查找前一个兄弟节点
    // console.log(s2.previousElementSibling)
    // 4. 查找后一个兄弟节点
    // console.log(s2.nextElementSibling)

    // -----------------------
    add.addEventListener('click', () => {
      // 1. 创建一个img对象
      const img = document.createElement('img')
      img.src = 'https://www.itcast.cn/2018czgw/images/logo2.png'
      // 2. 把创建出来的对象放入父盒子
      // s2.parentNode.append(img) // 结尾追加
      s2.parentNode.prepend(img) // 开头追加
    })

    del.addEventListener('click', () => {
      s2.parentNode.remove()
    })
  </script>
</body>

</html>